<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Jpetstore后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <script src="../js/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>



</head>
<body>
<div id="app">

    <el-container style="height: 100%">
        <el-aside width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%">
            <el-menu :default-openeds="['1', '3']" style="height: 100%"
                     background-color="rgb(48,65,86)"
                     text-color="#fff"
                     :collapse="isCollapse"
            >
                <div style="height: 60px;line-height: 60px;text-align: center">、
                    <img src="/images/logo-topbar.gif">
                </div>

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-s-home"></i>
                        <span slot="title">查看首页</span></template>
                    <el-menu-item index="1-1" @click="handleMainFormClick">首页信息</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group title="分类选择">
                        <el-menu-item index="1-1-1" @click="handleCategory">分类选择</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="全部商品">
                        <el-menu-item index="1-2" @click="handleAllItem">全部商品</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>
                        <span slot="title">账户管理</span></template>
                    <el-menu-item index="2-1" @click="handleAccountClick">所有账户</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>
                        <span slot="title">个人中心</span></template>
                    <el-menu-item-group>
                        <template slot="title">个人中心</template>
                        <el-menu-item index="3-1"@click="handlePersonClick">个人中心</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span></template>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container >
            <el-header style=" font-size: 12px; display: flex">

                <div style="flex:1;font-size: 18px; width: 200px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                </div>


                <div style="flex:1.2;font-size: 25px">
                    <b style="color: black">Jpetstore后台管理系统</b>
                </div>

                <el-dropdown>
                    <i class="el-icon-arrow-down"></i>

                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                <span>朱阳</span>
            </el-header>

            <el-main >

                <div  style="font-size: 25px ;color: rgb(255,158,13) ;margin-left: 20px" v-text="`The ITEM Of  ${ productId1}`"></div>


                <BR>
                <br>
                <br>
                <div style="padding: 10px  0">
                    <el-input style="width: 500px" suffix-icon="el-icon-search" placeholder="请输入itemId" v-model="itemId_search"></el-input>


                    <el-button style="margin-left: 5px" type="primary" @click="search">搜索</el-button>
                    <el-button style="margin-left: 10px" type="warning" @click="reset">重置</el-button>

                </div>
                <div style="margin: 10px 0 ">
                    <el-button type="primary" style="width: auto " @click="handleAdd">新增
                        <i class="el-icon-circle-plus-outline"></i>
                    </el-button>
                    <el-dialog title="商品信息" :visible.sync="dialogFormVisible2">
                        <el-form label-width="100px" size="small">

                            <el-form-item label="itemid" :label-width="formLabelWidth">
                                <el-input v-model="form2.itemid" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="productid" :label-width="formLabelWidth">
                                <el-input v-model="form2.productid" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="listprice" :label-width="formLabelWidth">
                                <el-input v-model="form2.listprice" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="unitcost" :label-width="formLabelWidth">
                                <el-input v-model="form2.unitcost" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="supplier" :label-width="formLabelWidth">
                                <el-input v-model="form2.supplier" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="status" :label-width="formLabelWidth">
                                <el-input v-model="form2.status" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="attr1" :label-width="formLabelWidth">
                                <el-input v-model="form2.attr1" autocomplete="off"></el-input>
                            </el-form-item>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="addItem">确 定</el-button>
                        </div>
                    </el-dialog>

                    <el-button type="danger" style="width: auto">批量删除
                        <i class="el-icon-remove-outline"></i>
                    </el-button>
                    <el-button type="success" style="width: auto">导入
                        <i class="el-icon-bottom"></i>
                    </el-button>
                    <el-button type="success" style="width: auto">导出
                        <i class="el-icon-top"></i>
                    </el-button>
                </div>


                <el-table :data="tableData" stripe header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column prop="itemid" label="itemId" width="70">
                    </el-table-column>
                    <el-table-column prop="productid" label="productId" width="150">
                    </el-table-column>
                    <el-table-column prop="listprice" label="listPrice" width="150">
                    </el-table-column>
                    <el-table-column prop="unitcost" label="unitCost" width="150">
                    </el-table-column>
                    <el-table-column prop="supplier" label="supplier"  width="150">
                    </el-table-column>
                    <el-table-column prop="status" label="status" width="150">
                    </el-table-column>
                    <el-table-column prop="attr1" label="attr1" width="200">
                    </el-table-column>
                    <el-table-column label="操作" style="width: auto;display: flex">
                        <template slot-scope="scope" style="width: auto;display: flex">
                            <el-button style="order:1;" type="primary" size="small" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='再想想'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="您确定删除吗？"
                                    @confirm="handleDelete(scope.row.itemid)"
                            >
                                <el-button style="order:2;" type="danger" size="small" slot="reference"> 删除  <i class="el-icon-remove-outline"></i></el-button>

                            </el-popconfirm>

                        </template>

                    </el-table-column>
                </el-table>

                <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
                    <el-form label-width="100px" size="small">

                        <el-form-item label="itemid" :label-width="formLabelWidth">
                            <el-input v-model="form.itemid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="productid" :label-width="formLabelWidth">
                            <el-input v-model="form.productid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="listprice" :label-width="formLabelWidth">
                            <el-input v-model="form.listprice" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="unitcost" :label-width="formLabelWidth">
                            <el-input v-model="form.unitcost" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="supplier" :label-width="formLabelWidth">
                            <el-input v-model="form.supplier" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="status" :label-width="formLabelWidth">
                            <el-input v-model="form.status" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="attr1" :label-width="formLabelWidth">
                            <el-input v-model="form.attr1" autocomplete="off"></el-input>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveItem">确 定</el-button>
                    </div>
                </el-dialog>


            </el-main>
        </el-container>
    </el-container>
</div>



<script type="text/javascript">


    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };

            return {
                // tableData: Array(10).fill(item),
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                // formLabelWidth:900,
                pageNum: 1,
                pageSize: 10,
                total:100,
                productId1:'',
                tableData: [] ,// 用于存储从后端获取的产品信息
                dialogFormVisible:false,
                dialogFormVisible2:false,
                form:{},
                form2: {
                    itemid: '',
                    productid: '',
                    listprice: '',
                    unitcost: '',
                    supplier: '',
                    status: '',
                    attr1: ''
                    // 在这里添加其他表单字段
                },
                multipleSelection:[],
                itemId_search:''


            }
        },
        mounted() {
            const urlParams = new URLSearchParams(window.location.search);
            const productId = urlParams.get('productId');
            this.productId1=productId
            if(productId){
                axios.get('http://localhost:8080/categories/item',
                    {
                        params: {
                            productId:productId
                        }

                    }
                )
                    .then(response => {
                        // 请求成功时更新产品列表
                        this.tableData = response.data.data;

                    })
                    .catch(error => {
                        // 处理请求错误
                        console.error('Error fetching products:', error);
                    });
            }
            else{
                //
            }


        },
        methods: {
            collapse() {
                this.isCollapse = !this.isCollapse; // Toggle the value of isCollapse
                if(this.sideWidth)
                {
                    this.sideWidth= 64
                    // this.collapseBtnClass='el-icon-s-unfold'
                }
            },


            load(){
                axios.get('http://localhost:8080/categories/item',
                    {
                        params: {
                            productId:this.productId1
                        }

                    }
                )
                    .then(response => {
                        // 请求成功时更新产品列表
                        this.tableData = response.data.data;

                        console.log(response.data);

                    })
                    .catch(error => {
                        // 处理请求错误
                        console.error('Error fetching products:', error);
                    });

            },
            reset(){
                this.userid=" ";
                this.email=" ";
                this.address=" ";
            },
            handleAdd()
            {
                this.dialogFormVisible2=true;
                this.form2={};
            },
            handleEdit(row){
                this.form=row;
                this.dialogFormVisible=true;
            },
            handleDelete(itemId){

                axios.delete("http://localhost:8080/categories/deleteItem",
                    {
                        params:{
                            itemid:itemId
                        }
                    }
                )
                    .then(res=>
                {
                    if(res){
                        this.$message.success("删除成功");

                        this.load();

                    }
                    else{
                        this.$message.error("删除失败")
                    }
                })
            },
            handleSelectionChange(val){
                this.multipleSelection=val;//
                //axios
                //List<Account>accountList
            },
            addItem(){
                axios.post("http://localhost:8080/categories/addItem",this.form2,).then(res=>
                    {
                        if(res){
                            this.$message.success("保存成功");
                            this.dialogFormVisible2=false;
                            this.load();
                        }
                        else{
                            this.$message.error("保存失败")
                        }
                    }
                )
            },
            saveItem(){
                axios.put("http://localhost:8080/categories/editItem",this.form).then(res=>
                    {
                        if(res){
                            this.$message.success("保存成功");
                            this.dialogFormVisible=false;
                            this.load();
                        }
                        else{
                            this.$message.error("保存失败")
                        }
                    }
                )
            },
            search(){
                console.log(this.itemId_search)
                axios.get("http://localhost:8080/categories/search",{
                    params:{
                        itemId:this.itemId_search
                    }
                })
                    .then(res=>
                    {
                        console.log(res.data)

                        this.tableData = res.data.data;


                    })
                    .catch(error => {
                        // 处理请求错误
                        console.error('Error fetching products:', error);
                    });

            },
            handleAccountClick(){
                window.location.href = "account.html";
            },
            handleMainFormClick(){
                window.location.href="main.html";
            },
            handleCategory(){
                window.location.href="category.html";
            },
            handleAllItem(){
                window.location.href="allitem.html";
            },
            handlePersonClick(){
                window.location.href="person.html"
            }


        }



    })
</script>

</body>
</html>